<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>派遣事件</title>
        <style>
            .wrapper { 
                padding: 10px;
                border: 1px solid blue; 
                margin: 10px auto;
            }
        </style>
    </head>
    <body>
        <h1>派遣事件</h1>
        <div class="wrapper">
            <button type="button" class="btn first">让输入框获得焦点</button>
            <button type="button" class="btn second">让输入框失去焦点</button>
        </div>
        <div class="wrapper">
            <input type="text" class="in-box">
        </div>
        <p>请在浏览器终端中查看运行结果</p>
        <p>请在参考文档中关注 <b>合成事件</b> (synthetic event)</p>
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/Creating_and_triggering_events">创建和触发事件</a>
        <script>
            const input = document.querySelector('.in-box');
            const focusEventType = '焦点';
            const blurEventType = '失宠';
            const focusHandler = function(evt) {
                console.log( evt.type , evt.target );
                // 调用focus函数让事件目标(此时指是输入框)获得焦点
                evt.target.focus(); // HTMLInputElement.prototype.focus()
            }
            // HTMLInputElement.prototype.blur()
            const blurHandler = evt => {
                console.log( evt.type , evt.target );
                evt.target.blur();
            }

            // 为 input 绑定 focusEventType 事件监听器
            input.addEventListener(focusEventType, focusHandler); // 若未显示设置第三个参数则默认为false
            input.addEventListener(blurEventType, blurHandler);

            const firstBtn = document.querySelector('.btn.first');

            firstBtn.addEventListener('click', evt => {
                console.log( evt.type, evt.target );
                // 创建Event的一个实例
                let e = new Event(focusEventType);
                // 通过 input 派遣事件
                input.dispatchEvent(e); // EventTarget.prototype.dispatchEvent(e)
            });

            const secondBtn = document.querySelector('.btn.second');

            secondBtn.addEventListener('click', evt => {
                console.log( evt.type, evt.target );
                // 创建Event的一个实例
                let e = new Event(blurEventType);
                // 通过 input 派遣事件
                input.dispatchEvent(e); // EventTarget.prototype.dispatchEvent(e)
            });
            
        </script>
    </body>
</html>